<template>
  <PageContainer>
    <Header title="实名认证" />
    <view class="hb-p-4">
      <Card title="实名认证" :title-font-size="'32rpx'" :padding="[32]" :show-divider="false">
        <template #header-right>
          <view
            class="hb-inline-block hb-text-xs hb-rounded-full hb-px-2 hb-py-1"
            :style="{ background: status.bgColor, color: status.color }"
          >
            {{ status.text }}
          </view>
        </template>
        <view class="hb-flex hb-flex-col hb-gap-3 hb-mt-3">
          <view class="hb-flex hb-gap-3 hb-text-sm">
            <view>认证类型：</view>
            <view>{{ authType.text }}</view>
          </view>

          <view class="hb-flex hb-gap-3 hb-text-sm">
            <view>认证主体：</view>
            <view>
              {{ userStore.userInfo?.aiBotCertificationVo?.certificationName }}
            </view>
          </view>
        </view>
        <view
          v-if="
            userStore.userInfo?.aiBotCertificationVo?.auditRemark &&
            userStore.userInfo?.aiBotCertificationVo?.auditStatus === AuditStatusEnum.REJECTED
          "
          class="hb-text-xs hb-mt-3 hb-text-[#EA5E0E]"
        >
          {{ userStore.userInfo?.aiBotCertificationVo?.auditRemark }}
        </view>
        <view
          v-if="userStore.userInfo?.aiBotCertificationVo?.auditStatus === AuditStatusEnum.REJECTED"
          class="hb-flex hb-justify-center hb-mt-3"
        >
          <tm-button
            :width="176"
            :height="64"
            :round="10"
            :outlined="true"
            type="primary"
            @click="handleAudit"
          >
            重新认证
          </tm-button>
        </view>
      </Card>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import Card from '../realNameAuth/components/Card/index.vue';
  import { AuditStatusEnum, auditStatusText, authTypeText } from '@/enums/LoginEnum';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  /* realNameAuthResult 实名认证 */

  const status = computed(() => {
    return auditStatusText(userStore.userInfo?.aiBotCertificationVo?.auditStatus);
  });

  const authType = computed(() => {
    return authTypeText(userStore.userInfo?.aiBotCertificationVo?.certificationType);
  });
  const handleAudit = () => {
    navigateTo({
      name: 'realNameAuth',
      options: {
        authType: userStore.userInfo?.aiBotCertificationVo?.certificationType!,
      },
    });
  };

  onShow(() => {
    userStore.getUserInfo();
  });
</script>

<style lang="scss" scoped></style>
